.break-line{
/*     position:relative; */
    border-bottom: 4px solid lightgrey;
    flex-grow: 1;
    margin-left: 10px;
    margin-right: 10px;
  }
  
  .toggle-break{
    display:flex;
    flex-wrap: nowrap;
    flex-direction: row;
    width:100%;
    /* overflow: hidden; */
    align-items: center;
    background-color: white;
    border-width: 0;
    border-radius: 5px;
    height: fit-content;
    justify-content: space-between;
    cursor: pointer;
    border: 1px solid lightgray;
    margin: 1px 0px;
  }

  .toggle-break:hover {
    background-color: lightgray
  }

  .toggle-break > .icon {
    height: auto;
    width: auto;
  }

  .collapsible-content {
    /* padding: 0 18px; */
    /* overflow-x: hidden !important; *//* 
    overflow-y: auto; */
    background-color: white !important;
    max-height: 0;
    transition: max-height 0.2s ease-out !important;
    width:100%;
  }

  .area-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--order-header-color);  }
  
.area-info > span {
  font-size: 0.8em;
  color: gray;
}



/* Universal collapsible animation class */
.a-collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* When .active is added, expand the collapsible */
.a-collapsible.is-active {
  max-height: 500px; /* Adjust as needed for your content */
}

/*
Usage Instructions:
1. Add the class "a-collapsible" to the content you want to show/hide.
2. Toggle the "is-active" class on the collapsible element (via JS or CSS selector) to animate open/close.
Example HTML:
  <button onclick="document.getElementById('example-collapsible').classList.toggle('is-active')">Toggle</button>
  <div id="example-collapsible" class="a-collapsible">
    <!-- Collapsible content here -->
  </div>
*/